<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 条件查询 -->
    <el-card class="queryFormElCard mt-4">
        <el-form :model="queryParam" ref="queryFromRef">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="用户名">
                        <el-input v-model="queryParam.username" placeholder="请输入用户名" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="queryParam.startTime" type="datetime" placeholder="请选择开始时间"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                            time-format="HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="queryParam.endTime" type="datetime" placeholder="请选择结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD"
                            time-format="HH:mm:ss" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-space class="ml-2">
                        <el-button plain type="primary" :icon="Search" @click="querySelective">查询</el-button>
                        <el-button plain :icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-space>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <!-- 表格、分页 -->
    <el-card>
        <el-space class="mb-4">
            <el-button plain type="danger" :icon="Delete" @click="batchDelete"
                v-perm="['sys:log:operate:delete']">删除</el-button>
        </el-space>
        <el-table :data="tableData" border :header-cell-style="{ 'background': '#f2f2f2', 'color': '#515a6e' }"
            style="width: 100%" height="calc(100vh - 310px)" max-height="calc(100vh - 310px)" row-key="id"
            @selection-change="handleSelectionChange" v-loading="tableLoading">
            <el-table-column type="selection" width="55px" />
            <el-table-column prop="operateRealName" label="用户名" width="120px" />
            <el-table-column label="请求类型" width="90px">
                <template #default="scope">
                    <el-tag type="warning" v-if="scope.row.type == 0">ajax</el-tag>
                    <el-tag type="primary" v-if="scope.row.type == 1">普通请求</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="action" label="请求动作" width="130px" />
            <el-table-column prop="host" label="请求主机" width="140px" />
            <el-table-column prop="uri" label="请求路径" width="250px" />
            <el-table-column prop="httpMethod" label="请求方式" width="100px" />
            <el-table-column prop="classMethod" label="请求类方法" show-overflow-tooltip/>
            <el-table-column prop="params" label="请求参数" show-overflow-tooltip/>
            <el-table-column prop="operateTime" label="请求时间" width="200px" />
            <el-table-column label="操作" width="100px" fixed="right">
                <template #default="scope">
                    <el-space>
                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteById(scope.row)"
                            v-perm="['sys:log:operate:delete']">删除</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPageNum" v-model:page-size="currentPageSize"
            :page-sizes="[30, 50, 100, 300, 500]" layout="total, sizes, prev, pager, next, jumper" background
            :total="totalCount" @size-change="changePageSize" @current-change="changePageNum" />
    </el-card>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue"
import { Delete, Refresh, Search } from '@element-plus/icons-vue'
import { querySelectiveReq,deleteReq } from '@/api/sys/log/operate/index.js'

import { confirm } from '@/utils/messageBoxUtils.js'
import { success, info } from '@/utils/messageUtils.js';

onMounted(() => {
    querySelective();
})

// 条件查询
const queryParam = reactive({
    username: '',
    startTime: null,
    endTime: null,
})
const queryFromRef = ref()
const resetQuery = () => {
    queryParam.username = ''
    queryParam.startTime = null
    queryParam.endTime = null
    queryFromRef.value?.resetFields();
    currentPageNum.value = 1
    querySelective();
}

// 分页查询、条件查询
const tableLoading = ref(false)
const tableData = ref([])
const total = ref()
const querySelective = () => {
    tableLoading.value = true;
    querySelectiveReq(
        currentPageNum.value,
        currentPageSize.value,
        {
            username: queryParam.username ? queryParam.username : '',
            startTime: queryParam.startTime ? queryParam.startTime : null,
            endTime: queryParam.endTime ? queryParam.endTime : null,
        }
    ).then(res => {
        if (res.code == 200) {
            tableData.value = res.data
            total.value = res.total
        }
    }).finally(() => {
        tableLoading.value = false
    })
}
const totalCount = ref(0)
watch(() => total.value, (newValue) => {
    totalCount.value = newValue;
});

const currentPageNum = ref(1)
const currentPageSize = ref(30)
// 翻页
const changePageNum = (pageNum) => {
    currentPageNum.value = pageNum
    querySelective();
}
// 改变页大小
const changePageSize = (pageSize) => {
    currentPageNum.value = 1
    currentPageSize.value = pageSize
    querySelective();
}

// 删除
const deleteById = (row) => {
    const ids = []
    ids.push(row.id)
    confirm("您确定删除此日志吗？").then(() => {
        deleteReq(ids).then(res => {
            if (res.code == 200) {
                querySelective();
                success("删除日志成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}

// 批量操作
const selectIds = ref([])
const handleSelectionChange = (val) => {
    selectIds.value = []
    val.forEach(item => {
        selectIds.value.push(item.id)
    })
}

// 批量删除
const batchDelete = () => {
    confirm("您确定删除选中的日志吗？").then(() => {
        deleteReq(selectIds.value).then(res => {
            if (res.code == 200) {
                querySelective();
                success("删除成功！");
            }
        })
    }).catch(() => {
        info("取消删除！");
    })
}
</script>

<style>
.queryFormElCard .el-card__body {
    padding-bottom: 0;
}
</style>@/api/sys/log/operate/index.js